import React,{Component} from 'react'

import {Redirect} from 'react-router-dom'
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import styled from 'styled-components'
const InputStyle = styled.div`
    width:500px;height:300px;position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background-color:#fff;
`;

class Login extends Component{
    constructor(props){
        super(props)
        this.state = {
            loginFlag:false
        }
    }
    handleSubmit(e){
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
            if(values.username==='admin'&&values.password==='123'){
                this.setState({
                    loginFlag:true
                })
            }
          }else{

          }
        });
    }
    render(){
        if(this.state.loginFlag){
            return <Redirect to='/homepage' />;
        }
        const { getFieldDecorator } = this.props.form;
        return (
            <div style={{backgroundColor:'#ccc',height:'100%',position:'relative'}}>
                <InputStyle>
                <h1 style={{color:'#000',borderBottom:'1px solid #ccc',height:'60px',lineHeight:'60px',width:'100%'}}>
                <span style={{marginLeft:'15px'}}>HOMEPAGE    登录</span></h1>
                <Form onSubmit={this.handleSubmit.bind(this)} className="login-form"
                style={{width:'400px',margin:'24px 0 0 44px'}}>
                    <Form.Item>
                        {getFieldDecorator('username', {
                        rules: [
                                { required:true,message:'用户名不能为空' },
                                { max:6,message:'长度最大不能超过6位'},
                                { min:3,message:'长度最小不能小于3位'}
                            ],
                        })(
                        <Input
                            autoFocus  
                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            placeholder="请输入用户名"
                        />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                        rules: [{ required: true,min:3,max:8, message: '密码不能为空' }],
                        })(
                        <Input
                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                            style={{ color: 'rgba(0,0,0,.25)',cursor:'pointer'}}
                            type="password"  
                            placeholder="请输入密码"
                        />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: true,
                        })(<Checkbox>记住我</Checkbox>)}
                        <Button type="primary" htmlType="submit" className="login-form-button">登录</Button>
                    </Form.Item>
                </Form>
                </InputStyle>
                </div>
        )
    }
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(Login);
export default WrappedNormalLoginForm